<template>
    <div class="sdy-cate">
        <sdyHeader title="" back >
            <template #title>
                <van-search @focus="inSearchHandler" shape="round" background="#c72418" placeholder="请输入搜索关键词"/>
            </template>
        </sdyHeader>
        <div class="silde" ref="silde">
            <!--  通过给 inner 元素定位的方式 ， 可以实现出界回弹效果 -->
           <div 
           class="inner" 
           ref="inner"
           :style="{top: posY +'px'}"
           @touchstart="startHandler" 
            @touchmove="moveHandler"
            @touchend="endHandler">  
                <van-sidebar  v-model="index" @change="chanmgeHandler">
                    <van-sidebar-item 

                    v-for="item in cateList " 
                    :title=" item " />
                </van-sidebar>
           </div>
        </div>
        <div class="content">
            <div class="item" v-for="item in goodsList">
                <p class="title">{{ item. brand}}</p>
                <ul >
                    <li v-for="t in item.list"
                    @click="clickHandler(t.proid)">
                    <img :src="t.img1" alt="">
                    <div class="name">
                       <span>{{t.proname}}</span> 
                    </div>

                    </li>
                </ul>
            </div>
        </div>

    </div> 
</template>

<script setup lang="ts">
import {useRouter, type Router } from 'vue-router'
import  { onMounted, ref } from  'vue'
import {cateListApi ,categoryApi,categoryBrandProListApi } from '@/api/goodslist'
import type { all } from 'axios';
//导入相关  ts 接口
import  type {MyCateBrandGoodsdItem } from '@/config/interface'



 //准备一个数据， 表示当前触发的导航
const index = ref<number>(0)

//  vue3 拿  $router ,通过 useRouter  拿到 $router
const $router:Router = useRouter()
const inSearchHandler = () =>{
 
    console.log($router)
    $router.push('/search')
}

// 操作让 侧边栏滑动  +回弹

//准备变量， 
const startY = ref<number>(0)  //光标的初始位置
const moveY =ref<number>(0)   //移动的
const startTop = ref<number>(0)    //元素的初始位置

//拿到 inner 元素, 表示拿
const inner = ref<HTMLDivElement | null >(null)
const silde =ref<HTMLDivElement | null >(null)

const posY =ref<number>(0)
//鼠标按下的事件
const startHandler = (e :TouchEvent) =>{
    // console.log(e)

    //记录下光标的初试位置
    startY.value = e.touches[0].clientY
    // console.log(e.target)  //只能拿到一个div 信息，，我们需要拿到 inner

    //记录元素的初试位置
    startTop.value = (inner.value as HTMLElement).offsetTop

}

//鼠标移动的事件
const moveHandler = (e: TouchEvent) =>{
    //要实时拿到坐标位置
    moveY.value = e.touches[0].clientY - startY.value
    // console.log(moveY.value)

// 随着移动 ， 实时操作  posY 数值
// posY 就可以直接当做 inner 元素的 top 方向定位
    posY.value =  moveY.value + startTop.value  

    //判断边界值 上方最大到 100
    if(posY.value >= 100 ) posY.value = 100

    if(
        posY.value <=
        -(inner.value as HTMLElement).offsetHeight -
        -(silde.value as HTMLElement).offsetHeight -100
    ) posY.value =
    -(inner.value as HTMLElement).offsetHeight -
    -(silde.value as HTMLElement).offsetHeight -100
}


//鼠标抬起的事件 ，
const  endHandler = ()=>{
    moveY.value = 0


//上方回弹
if(posY.value >= 0 ) posY.value = 0

//下方回弹
if(
    posY.value <=
    -(inner.value as HTMLElement).offsetHeight -
     -(silde.value as HTMLElement).offsetHeight 
    ) posY.value =
    -(inner.value as HTMLElement).offsetHeight -
    -(silde.value as HTMLElement).offsetHeight 




}

//准备一个 右侧内容渲染的数组
const goodsList = ref<MyCateBrandGoodsdItem[]>([])


// 第一个也需要出 现数据，
//准备一个 根据当前分类请求分类内 所有相关数据的方法

const getGoodsList = async (cate: string)=>{
    // console.log(cate)
    // console.log(`我要根据 ${ cate}  请求右边的数据`)

    //1. 根据当前  cate 请求回来 品牌列表
    const brandList = await categoryApi(cate) 
    // console.log(brandList)   //产品分类下品牌列表

    //2.根据 品牌列表内 的内容，请求 商品列表
    // 准备一个数组， 表示这个品牌下的产品的数据，
    const List: Promise<any>[] = []
    //用循环遍历的方式 拿到这些数据
    brandList.data.forEach((item:{brand: string} )=> {
      List.push(categoryBrandProListApi({category: cate,brand:item.brand}))  
    })

    const goods= await Promise.all(List)
    // console.log(goods)   //获取某分类下某品牌的商品列表


    //把商品  和  品牌  我们放在一块 渲染出来
    //3. 组装数据

    const res:MyCateBrandGoodsdItem[] = []
    brandList.data.forEach((item:{brand: string},index: number) =>{
        res.push({
            cate,    //表示当前侧边栏点击的哪一项产品
            brand: item.brand,  //表示那个品牌
            list: goods[index].data    //表示那个品牌里的数据
        })
    })
    // console.log(res)

    goodsList.value = res

} 


//准备一个分类列表数组
const cateList = ref<string[]>([])

// slide 侧边栏导航切换事件
const chanmgeHandler = async (index: number) => {
    // index 表示 当前状态 的索引：

    // console.log('切换了', index)
    //只有从  cateList 中拿到对应的随意位置即可
    //拿到当前 分类

    const cate = cateList.value[index]

    getGoodsList(cate)

    // console.log('切换了', '当前分类是:', cate) //当前分类的数据
    // const brandList = await categoryApi(cate) 
    // console.log(brandList)   //产品分类下品牌列表

    // //准备一个数组， 表示这个品牌下的产品的数据，
    // const List: Promise<any>[] = []
    // //用循环遍历的方式 拿到这些数据

    // brandList.data.forEach((item:{brand: string} )=> {
    //   List.push(categoryBrandProListApi({category: cate,brand:item.brand}))  
    // })


    // const res= await Promise.all(List)
    // console.log(res)  //获取某分类下某品牌的产品列表

}


// // 点击进入详情页

const clickHandler = (id: string) =>{
  console.log(`查看 id 为${id} 的商品详情`)

  //跳转路由
$router.push({path:'/detail',query:{proid: id}})
}

onMounted(async () =>{
    const res = await cateListApi()
    // console.log(res)    //所有的产品的分类列表
    cateList.value = res.data   
    // console.log(cateList.value)



    //在函数调用下
    getGoodsList(res.data[0])
})



</script>



<style scoped lang="scss">

.sdy-cate{
    display: flex;
    height: 100%;

    >.silde{
        width: 80px;
        height:100%;
        overflow: auto;
        position: relative;
        overflow: hidden;
        display: block;

        >.inner{
            position: absolute;
            left:0; 

        }
    }  
    >.content{
        flex:1;
        background-color: #dddd;
        overflow-y: auto;


        >.item{
            >.title{
                height: 30px;
                font-weight: 700;
                background-color: red;
               justify-content: center;
               align-items: center;
            }

            >ul{
                display: flex;
                box-sizing: border-box;
                padding: 10px;
                justify-content: space-between;
                align-items: center;

                >li{

                    >img{
                        width: 50px;
                        height: 50px;
                        display: block;
                        margin-bottom: 5px;

                    }
                    >.name{
                        height: 20px;
                        overflow: auto;

                        >span{
                            font-size: 12px;
                            text-overflow: clip;
                            margin-right: 10px;
                        }
                    }
                }

            }


        }
    }
    
 }
  

</style>